<template>
  <div>
    <!-- list-type 文件列表的类型 -->
    <el-upload 
      list-type="picture-card" 
      :limit="1" 
      :file-list="filelist" 
      :on-preview="preview" 
      action="#"
      :on-change="changeFile"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :http-request="Upload"
      :class="{ disabled: fileComputed }"
    >
       <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-show="showProgress" :percentage="percent" style="width: 180px"/>
    <el-dialog title="图片预览" :visible.sync="isShow">
      <img :src="imgUrl" alt="" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import Cos from 'cos-js-sdk-v5'
const cos = new Cos({
  SecretId: 'AKID9B3qXAjFoJj6kLqLjpO8uSm4wcDf1gJm',
  SecretKey: 'Qn39Rgpr5g7jeT5VAh2zqfIFJF8Unyve'
})
export default {
  name: 'ImageUpload',
  data () {
    return {
      isShow: false,
      imgUrl: '',
      filelist: [], // 文件的数据
      currentFileUid: 0, // 于uid进行判断
      showProgress: false, // 进度条的显示
      percent: 0
    }
  },
  methods: {
    preview(file) {
      this.imgUrl = file.url
      this.isShow = true
    },
    handleRemove(file, fileList) {
      // file 删除的文件信息
      // fileList 删除完的数组
      /* console.log(file);
      console.log(fileList); */
      // 方式1
      // this.filelist = fileList
      // 方式2 通过filter方法 来筛选uid不等于file.uid的数据
      // item.uid === file.uid 是删除的数据
      // item.uid !== file.uid 未被删除的数据
      // this.filelist = this.filelist.filter(item => item.uid !== file.uid)
      // 方式3 根据被删除数据的索引删除数据
      const index = this.filelist.findIndex(item => item.url === file.url)
      this.filelist.splice(index,1)
    },
    changeFile(file, fileList) {
      // file是当前文件 fileList是当前最新的数据
      // 这一步不能省, 如果省了this.filelist 就没有值了
      this.filelist = fileList.map(item => item)
      // 为什么暂时不成功呢? 因为现在还没有上传 所有第二次进来的数据 一定是一个空的
      // 如果完成上传动作了 第一次进入 和 第二次进去的filelist的长度应该都是1 都应该有数据
      // 上传成功 => 数据才能进来 => 腾讯云cos
    },
    // 要开始做文件上传的检查了
    beforeUpload({ size,type,uid }) {
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      const maxsize = 5 * 1024 * 1024
      if (!types.some(item => item === type)) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false
      } else if (size > maxsize) {
        this.$message.error('上传图片不能大于5M')
        return false
      }
      // console.log(uid);
      this.currentFileUid = uid
      this.showProgress = true
      return true
    },
    // 上传图片的方法
    Upload({file}) {
      if (file) {
        cos.putObject({
          Bucket: 'sakura-1316493842',  // 存储桶的名称
          Region: 'ap-nanjing', // 存储桶所在地域
          Key: file.name, // 对象键（Object 的名称）
          Body: file, // 要上传的内容
          Headers: {
            'x-cos-traffic-limit': 819200, // 限速值设置范围为819200 - 838860800，即100KB/s - 100MB/s，如果超出该范围将返回400错误。
          },
          StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
          onProgress: params => {
            this.percent = params.percent * 100
          }
          // 上传存储桶的回调函数 返回成功或者失败
        }, (err, {statusCode,Location}) => {
          // 只有没有错误发生 并且 statusCode为200时 才表示上传成功
          // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
          if (!err && statusCode === 200) {
            this.filelist = this.filelist.map(item => {
              if (item.uid === this.currentFileUid) {
                // console.log(6);
                // upload 加这个属性为后面的节流做准备
                // 保存  => 图片有大有小 => 上传速度有快又慢 =>要根据有没有upload这个标记来决定是否去保存
                return {url: 'http://' + Location, upload: true}
              }
              return item
            })
            this.showProgress = false // 上传完成后让他隐藏
            this.percent = 0 // 进度归0
          }
        })
      }
    }
  },
  computed: {
    // 设定一个计算属性 判断是否已经上传完了一张
    fileComputed() {
      return this.filelist.length === 1
     }
  }
}
</script>

<style>
  .disabled .el-upload--picture-card{
    display: none;
  }
</style>